<template>
  <div>
    <div>
      <Button @click="queryList">查询</Button>
      <Button>新建</Button>
      <Button>批量删除</Button>
      <Button>生成wiki</Button>
      <Page :total="total" show-elevator show-sizer show-total :page-size-opts="[10,20,50,100]" />
    </div>
    <Table border ref="postTable" :columns="columns" :data="posts" :loading="loading">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" @click="remove(row, index)">删除</Button>
        <Button type="error" size="msall" @click="update( row, index)">修改</Button>
      </template>
    </Table>
    <Modal v-model="removeVisible" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>请确认是否删除？</span>
      </p>
      <div slot="footer">
        <Button type="error" size="large" long @click="remove">删除</Button>
      </div>
    </Modal>
    <Modal v-model="dialogVisible" :title="formType === 'create'? '新建文章' : '修改文章'">
      <post-form v-if="dialogVisible" v-model="post" ref="postForm"></post-form>
      <div slot="footer">
        <Button type="primary" size="large" @click="submit">确认</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import pageMixin from "@/mixins/pagation";
export default {
  mixins: ["pageMixin"],
  data() {
    const columns = [
      {
        type: "selection",
        width: 60,
        align: "center"
      },
      {
        title: "id",
        key: "id"
      },
      {
        title: "标题",
        key: "title",
        fixed: "left"
      },
      {
        title: "地址",
        key: "url"
      },
      {
        title: "分类",
        key: "type"
      },
      {
        title: "描述",
        key: "desc"
      },
      {
        title: "推荐人",
        key: "desc"
      },
      {
        title: "推荐时间",
        key: "createdAt"
      },
      {
        title: "更新时间",
        key: "updatedAt"
      },
      {
        title: "操作",
        slot: "action",
        align: "center",
        fixed: "right"
      }
    ];
    return {
      columns,
      posts: [],
      loading: false,
      requestParams: {}
    };
  },
  methods: {
    queryList(pageNum) {
      this.loading = true;
      pageNum && (this.requestParams.pageNum = pageNum);
      pageQuery(this.requestParams)
        .then(({ posts, total }) => {
          this.loading = false;
          this.posts = posts;
          return total;
        })
        .catch(err => {
          this.loading = false;
          this.$Message.error("请求失败");
        });
    }
  }
};
</script>

<style>
</style>

